<template>
  <!-- 弹框 -->
  <el-dialog
    :title="editOrAdd == '添加商品' ? '添加商品' : '编辑商品1'"
    :visible.sync="dialogVisible"
    width="70%"
    :before-close="clearFrom"
  >
    <!-- 添加内容 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="类目选择" prop="category">
        <el-button type="primary" @click="innerVisible = true"
          >{{ ruleForm.category ? ruleForm.category : "类目选择" }}
        </el-button>
      </el-form-item>

      <el-form-item label="商品名称" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>

      <el-form-item label="商品价格" prop="price">
        <el-input v-model="ruleForm.price"></el-input>
      </el-form-item>

      <el-form-item label="商品数量" prop="num">
        <el-input v-model="ruleForm.num"></el-input>
      </el-form-item>

      <el-form-item label="发布时间">
        <el-col :span="5">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.date1"
          ></el-date-picker>
        </el-col>

        <el-col :span="5">
          <el-time-picker
            placeholder="选择时间"
            v-model="ruleForm.date2"
          ></el-time-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="商品卖点" prop="sellPoint">
        <el-input v-model="ruleForm.sellPoint"></el-input>
      </el-form-item>

      <el-form-item label="商品图片" prop="image">
        <el-button type="primary" @click="innerVisibleImg = true"
          >上传图片</el-button
        >
        <img :src="ruleForm.image" height="200px" alt="" />
      </el-form-item>

      <el-form-item label="商品描述" prop="descs">
        <WangEditor ref="myEditor" @getEditorContent="getEditorContent" />
      </el-form-item>

      <el-form-item label="规格参数配置" v-show="isShow"> </el-form-item>
      <el-form
        ref="dynamicValidateForm"
        label-width="120px"
        class="demo-dynamic"
      >
        <el-form-item
          v-for="(item, index) in groups"
          :label="item.title"
          :key="index"
          :prop="item.value"
        >
          <el-input v-model="item.value"></el-input>

          <el-form-item
            v-for="(ele, i) in item.chiledern"
            :label="ele.title"
            :key="i"
            :prop="ele.value"
          >
            <el-input v-model="ele.value"></el-input>
          </el-form-item>
        </el-form-item>
      </el-form>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>

    <!-- 1 内弹框  类目选择-->
    <el-dialog
      width="40%"
      title="类目选择"
      :visible.sync="innerVisible"
      append-to-body
    >
      <TreeGoods @sendTreeData="sendTreeData" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="showTreeData">确定</el-button>
      </span>
    </el-dialog>

    <!-- 2 内弹框 上传图片 -->
    <el-dialog
      width="40%"
      title="上传图片"
      :visible.sync="innerVisibleImg"
      append-to-body
    >
      <UploadImg @sendImg="sendImg" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="clearFrom">取 消</el-button>
        <el-button type="primary" @click="showImg">确定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { val } from "dom7";
import TreeGoods from "./TreeGoods.vue";
import UploadImg from "./UploadImg.vue";
import WangEditor from "./WangEditor.vue";
export default {
  props: {
    editOrAdd: {
      type: String,
      default: "添加商品",
    },
    rowData: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  // props:['editOrAdd','rowData'],

  data() {
    return {
      isShow: false, // 是否显示规格参数配置
      dialogVisible: false,
      innerVisible: false,
      innerVisibleImg: false,
      imgUrl: "",
      treeData: {},
      ruleForm: {
        id: "",
        title: "",
        price: "",
        num: "",
        sellPoint: "",
        image: "",
        descs: "",
        cid: "",
        category: "",
        date1: "",
        date2: "",
      },
      groups: [],
      rules: {
        title: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
      },
    };
  },
  watch: {
    rowData(newValue, oldValue) {
      console.log("监听数据变化", newValue);
      this.ruleForm = newValue;
      // 清空数据
      // this.$refs.myEditor.clearContent();
      this.$nextTick(() => {
        // this.$refs.myEditor.editor.text.html(newValue.descs);
        console.log("this.$refs.myEditor", this.$refs.myEditor);
        // this.$refs.myEditor.editor.text.html(newValue.descs);
      });
      if (val.paramsInfo) {
        this.isShow = true;
        this.groups = JSON.parse(val.paramsInfo);
      }
    },
  },
  methods: {
    // 1.1 获取子组件传递过来的数据
    getEditorContent(content) {
      this.ruleForm.descs = content;
    },
    showImg() {
      this.innerVisibleImg = false;
      this.ruleForm.image = this.imgUrl;
    },

    showTreeData() {
      this.innerVisible = false;
      this.ruleForm.category = this.treeData.name;
      this.ruleForm.cid = this.treeData.cid;
      // this.isShow = true;

      this.$api
        .categoryData({
          cid: this.treeData.cid,
        })
        .then(res => {
          console.log("res", res.data);

          if (res.data.status === 200) {
            this.isShow = true;
            let result = res.data.result[res.data.result.length - 1];
            this.groups = JSON.parse(result.paramData);
          } else {
            this.isShow = false;
          }
          // let data = res.data.data;
          // let arr = [];
          // data.forEach((item) => {
          //   if (item.id == this.ruleForm.cid) {
          //     arr = item.params;
          //   }
          // });
          // console.log("arr", arr);
          // this.isShow = true;
        });
    },
    //
    sendTreeData(data) {
      console.log(data);
      this.treeData = data;
    },
    close() {
      this.$emit("close");
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          // alert("submit!");
          console.log("获取输入的信息", this.ruleForm);
          let {
            title,
            cid,
            category,
            sellPoint,
            price,
            num,
            descs,
            image,
            id,
          } = this.ruleForm;
          // 判断是添加还是修改
          if (this.editOrAdd === "添加商品") {
            this.$api
              .addGoods({
                title,
                cid,
                category,
                sellPoint,
                price,
                num,
                descs,
                image,
                paramsInfo: JSON.stringify(this.groups),
              })
              .then(res => {
                console.log("添加实现----", res.data);
                if (res.data.status == 200) {
                  this.$parent.http(1);
                  this.$message({
                    type: "success",
                    message: "添加成功!",
                  });
                  this.clearFrom();
                }
              });
          } else {
            console.log("修改商品", id);
            this.$api
              .updateGoods({
                id,
                title,
                cid,
                category,
                sellPoint,
                price,
                num,
                descs,
                image,
              })
              .then(res => {
                console.log("修改实现----", res.data);
                if (res.data.status == 200) {
                  this.$parent.http(1);
                  this.$message({
                    type: "success",
                    message: "修改成功!",
                  });
                  this.clearFrom();
                }
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields();
      this.ruleForm = {};
    },
    //  上传图片
    sendImg(data) {
      // this.ruleForm.image = data;
      console.log(data);
      this.imgUrl = data;
    },
    clearFrom() {
      this.ruleForm = {}; // 清空表单
      this.dialogVisible = false; //  关闭弹框
    },
  },
  components: { TreeGoods, UploadImg, WangEditor },
};
</script>

<style lang="scss" scoped></style>
